<template>
  <div class="tinymce-editor">
    <editor ref="cs-editor" v-model="myValue" :init="init" :disabled="disabled" v-if="isShow" @onClick="onClick"></editor>
  </div>
</template>
<script>
import { uploadImage } from "../../api/common/uploadFile";
import { getOpenDownloadFile } from "../../api/common/attachment";
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/themes/silver";
// 编辑器插件plugins
// 更多插件参考：https://www.tiny.cloud/docs/plugins/
import "tinymce/plugins/image"; // 插入上传图片插件
import "tinymce/plugins/media"; // 插入视频插件
import "tinymce/plugins/table"; // 插入表格插件
import "tinymce/plugins/lists"; // 列表插件
import "tinymce/plugins/wordcount"; // 字数统计插件
import "tinymce/plugins/fullscreen";
import "tinymce/plugins/imagetools";
import "tinymce/plugins/preview";
import "tinymce/plugins/print";
import "tinymce/plugins/fullpage";
import "tinymce/plugins/searchreplace";
import "tinymce/plugins/autolink";
import "tinymce/plugins/link";
import "tinymce/plugins/directionality";
import "tinymce/plugins/visualblocks";
import "tinymce/plugins/visualchars";
import "tinymce/plugins/textpattern";
import "tinymce/plugins/charmap";
import "tinymce/icons/default";
import "./components/indent2em";
// import "tinymce/plugins/indent2em";

export default {
  name: "tinyEditor",
  components: {
    Editor
  },
  props: {
    value: {
      type: String,
      default: ""
    },
    // 基本路径，默认为空根目录，如果你的项目发布后的地址为目录形式，
    // 即abc.com/tinymce，baseUrl需要配置成tinymce，不然发布后资源会找不到
    baseUrl: {
      type: String,
      default: ""
    },
    disabled: {
      type: Boolean,
      default: false
    },
    plugins: {
      type: [String, Array],
      default:
        "print preview fullpage searchreplace indent2em autolink directionality visualblocks visualchars fullscreen image link media table charmap lists wordcount  imagetools textpattern"
    },
    toolbar: {
      type: [String, Array],
      default:
        "formatselect | bold italic strikethrough indent2em forecolor backcolor fontsizeselect | fontselect | link image  | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat| code"
    },
    menubar: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      isShow: false,
      init: {
        language: "zh_CN",
        language_url:
          process.env.VUE_APP_PUBLIC_PATH + "tinymce/langs/zh_CN.js",
        theme: "silver",
        browser_spellcheck: true, // 拼写检查
        branding: true, // 去水印
        // elementpath: false,  //禁用编辑器底部的状态栏
        statusbar: false, // 隐藏编辑器底部的状态栏
        paste_data_images: true, // 允许粘贴图像
        menubar: this.menubar ? this.menubar : true, // 隐藏最上方menu
        fontsize_formats:
          "56px 48px 34px 32px 29px 24px 21px 20px 18px 16px 14px 12px 10px 8px 7px 6px",
        paste_webkit_styles: true,
        font_formats:
          "宋体=宋体;黑体=黑体;仿宋_GB2312=仿宋_GB2312;华文仿宋=华文仿宋;华文楷体=华文楷体;华文宋体=华文宋体;华文细黑=华文细黑;华文新魏=华文新魏;华文行楷=华文行楷;华文隶书=华文隶书;楷体_GB2312=楷体_GB2312;方正舒体=方正舒体;隶书=隶书;幼圆=幼圆;微软雅黑=microsoft yahei;",
        // contextmenu: `inserttable | cell row column deletetable`,
        contextmenu: false,
        relative_urls: false,
        remove_script_host: false,
        images_upload_handler: (blobInfo, success, failure) => {
          const fd = new FormData();
          fd.append("file", blobInfo.blob());
          uploadImage(fd).then(res => {
            if (res.code === 200) {
              const url = getOpenDownloadFile(res.result.largePath,true);
              if (url != null && url.length > 0) {
                success(url);
              } else {
                failure("图片上传失败");
              }
            } else {
              failure("图片上传失败");
            }
          });
        },
        init_instance_callback: editor => { },
        skin_url: process.env.VUE_APP_PUBLIC_PATH + "tinymce/skins/ui/oxide",
        content_css:
          process.env.VUE_APP_PUBLIC_PATH +
          "tinymce/skins/content/default/content.css",
        // skin_url: `${this.baseUrl}/tinymce/skins/ui/oxide-dark`, // 暗色系
        // content_css: `${this.baseUrl}/tinymce/skins/content/dark/content.css`, // 暗色系
        height: 700,
        plugins: this.plugins,
        toolbar: this.toolbar
      },
      myValue: this.value
    };
  },
  mounted() {
    console.log(this.value);
    //延迟解决 富文本初始化时 dom还未渲染到页面上
    setTimeout(() => {
      this.isShow = true;
      this.$nextTick(() => {
        tinymce.init({});
      });
    }, 100);
  },
  methods: {
    // 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
    // 需要什么事件可以自己增加
    onClick(e) {
      this.$emit("onClick", e, tinymce);
    },
    // 可以添加一些自己的自定义事件，如清空内容
    clear() {
      this.myValue = "";
    }
  },
  watch: {
    // value (newValue) {
    //   this.myValue = newValue
    // },
    myValue(newValue) {
      this.$emit("input", newValue);
      this.$emit("change", { target: { value: newValue } });
    }
  }
};
</script>
